<template>
  <div class="warpper">
    <van-empty description="空空如也!" v-if="data.length < 1" />
    <div style="margin-top: 10px" v-if="data.length > 0">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-grid :column-num="2">
          <van-grid-item v-for="(item, index) in data" :key="index">
            <router-link :to="'/productDetails?id=' + item.bookId">
              <van-image :src="imgUrls + item.coverImage" width="165" height="150" />
              <span>
                <font size="4" color="red">《{{ item.bookName }}》</font>
              </span>
            </router-link>
          </van-grid-item>
        </van-grid>
      </van-checkbox-group>
      <van-divider @click="move" v-if="data.length > 9">点击加载更多</van-divider>
    </div>
  </div>
</template>

<script>
import { getCollect } from '@/api/collect'
export default {
  data() {
    return {
      isshow: false,
      data: [],
      list: [],
      imgUrls: this.$baseApi
    }
  },
  created() {
    this.move()
  },
  methods: {
    move() {
      this.limit += 10
      this.getData(this.limit)
    },
    getData(limit) {
      this.$route.meta.title = '我的收藏'
      getCollect({
        pageSize: limit
      }).then(res => {
        this.data = res.rows
      })
    }
  }
}
</script>

<style scoped>
.warpper {
  width: calc(100% - 10px);
  margin: 0 auto;
}

.van-grid-item /deep/.van-grid-item__content--center {
  align-items: flex-start;
  line-height: 20px;
}

.van-grid-item .van-image {
  margin-bottom: 8px;
}
</style>
